<form [formGroup]="emailRecipientForm" (ngSubmit)="createEmailRecipient()" class="space-y-6 p-6">

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Recipient Name:</label>
    <input type="text" pInputText formControlName="name" placeholder="Enter recipient name..." class="w-full md:w-80"/>
  </div>
  @if (emailRecipientForm.get('name')?.invalid && (emailRecipientForm.get('name')?.dirty || emailRecipientForm.get('name')?.touched)) {
    <small class="text-red-500 pl-44">
      Recipient name is required.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Email Address:</label>
    <input type="email" pInputText formControlName="email" placeholder="Enter email address..." class="w-full md:w-80"/>
  </div>
  @if (emailRecipientForm.get('email')?.invalid && (emailRecipientForm.get('email')?.dirty || emailRecipientForm.get('email')?.touched)) {
    <small class="text-red-500 pl-44">
      Valid email is required.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Default Recipient:</label>
    <p-checkbox formControlName="defaultRecipient" [binary]="true"></p-checkbox>
  </div>

  <div class="flex justify-end">
    <p-button label="Add Recipient" [disabled]="emailRecipientForm.invalid" type="submit">
    </p-button>
  </div>

</form>
